[role='button'] {
  cursor: pointer;
}

// Button sizes
.button-size(@padding-y; @padding-x; @font-size; @line-height; @border-radius) {
  @iconsize: unit(@line-height, em);

  padding: @padding-y @padding-x;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;

  >.nom-icon {
    height: @iconsize;
  }

  &.p-only-icon.p-shape-circle {
    padding: @padding-y;

    >.nom-icon {
      width: @iconsize;
    }
  }
}

.nom-button {
  /* Structure */
  display: inline-block;
  color: var(--nom-color-text-0);
  line-height: normal;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  background-color: var(--nom-button-bg);
  border: 1px solid transparent;
  border-color: var(--nom-color-border);
  border-radius: 2px;
  cursor: pointer;
  transition: all .3s;
  user-select: none;
  zoom: 1;
  -webkit-user-drag: none;
  .button-size(@padding-y-base; @padding-x-base; @font-size-base; @line-height-base; @border-radius);

  &:not(.s-disabled):hover {
    background-color: var(--nom-color-fill-1);
    outline: none;
  }

  &:focus,
  &:hover,
  &:active,
  &.active {
    outline: none;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
    opacity: 0.65;
  }

  a& {

    &.disabled,
    fieldset[disabled] & {
      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
    }
  }

  &.p-block {
    width: 100%;
  }

  &.p-danger {
    // .u-color-danger-outline();
    color: var(--nom-color-danger);
    background-color: transparent;
    border-color: var(--nom-color-danger);

    &.nom-button-inline {
      &:hover {
        background: none !important;
      }
    }

    &.p-type-primary {
      // .u-color-danger();
      color: var(--nom-color-white);
      background-color: var(--nom-color-danger);
      border-color: var(--nom-color-danger);

      &:hover {
        background-color: var(--nom-color-danger-hover);
      }
    }

    &:not(.p-type-text, .p-type-link) {
      &:hover {
        color: var(--nom-color-white);
        background-color: var(--nom-color-danger-hover);
        border-color: var(--nom-color-danger-hover);
      }
    }
  }

  &.p-type-primary {
    color: var(--nom-color-white);
    background-color: var(--nom-color-primary);
    // .u-color-primary();
    border-color: var(--nom-color-primary);

    &:hover {
      background-color: var(--nom-color-primary-hover);
    }
  }

  &.p-type-dashed {
    border-style: dashed;
  }

  &.p-type-text {
    background-color: transparent;
    border-color: transparent;

    &:hover {
      .nom-preset-hover;

      &.p-danger {
        color: var(--nom-color-danger-hover);
      }
    }
  }

  &.p-type-link {
    color: var(--nom-color-primary);
    background-color: transparent;
    border-color: transparent !important;

    &.p-danger {
      color: var(--nom-color-danger);
    }

    &:hover {
      &.p-danger {
        color: var(--nom-color-danger-hover);
      }

      text-decoration: none;
      background: none;
    }
  }

  &.p-ghost {
    color: inherit !important;
    background-color: transparent !important;

    &:hover {
      background-color: var(--nom-color-fill-1) !important;
    }

    &.p-type-primary {
      .u-color-primary-outline();
    }
  }

  &.p-size-small {
    // line-height: ensure proper height of button next to small input
    .button-size(@padding-y-sm; @padding-x-sm; @font-size-sm; @line-height-sm; @border-radius-sm);
  }

  &.p-size-xsmall {
    // line-height: ensure proper height of button next to small input
    .button-size(@padding-y-xs; @padding-x-xs; @font-size-sm; @line-height-sm; @border-radius-sm);
  }

  &.p-size-large {
    // line-height: ensure proper height of button next to small input
    .button-size(@padding-y-lg; @padding-x-lg; @font-size-lg; @line-height-lg; @border-radius-lg);
  }

  &.p-size-xlarge {
    // line-height: ensure proper height of button next to small input
    .button-size(@padding-y-xl; @padding-x-xl; @font-size-xl; @line-height-lg; @border-radius-lg);
  }

  &.p-shape-round {
    .u-shape-round();
  }

  &.p-shape-circle {
    .u-shape-circle();
  }

  &.p-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    &.p-danger {
      color: var(--nom-color-danger);

      &:hover {
        color: var(--nom-color-white);
      }
    }
  }

  >.nom-icon+span,
  >span+.nom-icon {
    margin-left: 0.5rem;
  }

  &:not(.p-type-default),
  &:not(.p-type-text),
  &:not(.p-type-dashed),
  &:not(.p-type-link) {
    &:not([disabled]):hover {
      // filter: brightness(0.9);
    }
  }
}

.nom-button-inline {
  display: inline !important;
  padding: 0;
  white-space: normal;
  text-align: left;

  &:hover {
    background: none !important;
    background-color: transparent !important;
    // filter: brightness(0.65) !important;
    // filter: none;
  }

  &.s-hidden {
    display: none !important;
  }
}

.nom-table-ellipsis {
  .nom-button-inline {
    white-space: nowrap;
  }
}
